.progress-bar {
  position: fixed;
  z-index: 100000;
  width: 100vw;
  height: 4px;
  top: 0;
  overflow: hidden;
  background: rgba(221, 221, 221, 0.4);
}
.progress-bar::after {
  display: block;
  width: 33.3vw;
  height: 100%;
  transform-origin: top left;
  animation: gradcolours 5s steps(1) infinite, loadthird 1s infinite linear;
  content: ' ';
}

@keyframes loadthird {
  0% {
    transform: translateX(-33.3vw);
  }
  100% {
    transform: translateX(100vw);
  }
}

@keyframes gradcolours {
  0% {
    background: linear-gradient(90deg, rgba(232, 128, 152, 0) 0%, #e88098 30%, #e88098 50%, #e88098 70%, rgba(232, 128, 152, 0) 100%);
  }
  20% {
    background: linear-gradient(90deg, rgba(132, 190, 190, 0) 0%, #84bebe 30%, #84bebe 50%, #84bebe 70%, rgba(132, 190, 190, 0) 100%);
  }
  40% {
    background: linear-gradient(90deg, rgba(233, 135, 36, 0) 0%, #e98724 30%, #e98724 50%, #e98724 70%, rgba(233, 135, 36, 0) 100%);
  }
  60% {
    background: linear-gradient(90deg, rgba(175, 201, 78, 0) 0%, #afc94e 30%, #afc94e 50%, #afc94e 70%, rgba(175, 201, 78, 0) 100%);
  }
  80% {
    background: linear-gradient(90deg, rgba(98, 151, 164, 0) 0%, #6297a4 30%, #6297a4 50%, #6297a4 70%, rgba(98, 151, 164, 0) 100%);
  }
}
